<!-- <el-row>
        <el-col :span="3" v-for="item in itemData" :key="item.id" :offset="2">
          <a :href="'/shop/detail?id=' + item.id">
            <el-card :body-style="{ padding: '5px' }">
              <img
                :src="item.image ? item.image : hamburgUrl"
                class="image"
                alt="缺少图片"
              />
              <div style="padding: 10px">
                <span class="title">{{ item.title }}</span>
                <div class="info-wrapper">
                  <div class="sellPoint">{{ item.sellPoint }}</div>
                  <div>
                    <i
                      class="el-icon-s-goods"
                      style="
                        float: right;
                        color: rgba(255, 80, 24);
                        font-size: 20px;
                      "
                      >￥{{ item.price }}</i
                    >
                  </div>
                </div>
              </div>
            </el-card>
          </a>
        </el-col>
      </el-row> -->

<!-- <div>
      <el-tag
        type="warning"
        class="label"
        size="big"
        @click="$router.push('/mine')"
        >我的淘宝</el-tag
      >
      <el-tag
        type="warning"
        class="label"
        size="big"
        @click="$router.push('/cart')"
        >购物车</el-tag
      >
      <el-tag
        type="warning"
        class="label"
        size="big"
        @click="$router.push('/myOrder')"
        >我的订单</el-tag
      >
      <el-tag
        type="warning"
        class="label"
        size="big"
        @click="$router.push('/customerServ')"
        >联系客服</el-tag
      >
    </div> -->
<template>
  <div class="carousel-wrapper">
    <!-- 左侧按钮 -->
    <button class="nav-btn left" @click="prevSlide">‹</button>

    <!-- 轮播卡片 -->
    <div class="carousel-track">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="carousel-card"
        :class="getCardClass(index)"
      >
        <img :src="item.image" alt="商品图" />
        <div v-if="index === activeIndex" class="card-info">
          <h3>{{ item.title }}</h3>
          <p class="desc">{{ item.description }}</p>
          <p class="price">￥{{ item.price }}</p>
        </div>
      </div>
    </div>

    <!-- 右侧按钮 -->
    <button class="nav-btn right" @click="nextSlide">›</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      items: [
        {
          image: "https://i.imgtg.com/2023/01/16/QRa0s.jpg",
          title: "商品1",
          description: "这是商品1的描述信息。",
          price: 99,
        },
        {
          image: "https://i.imgtg.com/2023/01/16/QRa0s.jpg",
          title: "商品2",
          description: "这是商品2的描述信息。",
          price: 199,
        },
        {
          image: "https://i.imgtg.com/2023/01/16/QRa0s.jpg",
          title: "商品3",
          description: "这是商品3的描述信息。",
          price: 299,
        },
      ],
      timer: null,
    };
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    startAutoPlay() {
      this.timer = setInterval(() => {
        this.nextSlide();
      }, 4000);
    },
    nextSlide() {
      this.activeIndex = (this.activeIndex + 1) % this.items.length;
    },
    prevSlide() {
      this.activeIndex =
        (this.activeIndex - 1 + this.items.length) % this.items.length;
    },
    getCardClass(index) {
      const prev =
        (this.activeIndex - 1 + this.items.length) % this.items.length;
      const next = (this.activeIndex + 1) % this.items.length;

      if (index === this.activeIndex) return "active";
      if (index === prev) return "prev";
      if (index === next) return "next";
      return "hidden";
    },
  },
};
</script>

<style scoped>
.carousel-wrapper {
  position: relative;
  width: 320px;
  height: 300px;
  overflow: hidden;
  background: #f9f9f9;
  border-radius: 16px;
}

.carousel-track {
  position: relative;
  height: 100%;
}

.carousel-card {
  position: absolute;
  top: 0;
  width: 60%;
  height: 100%;
  left: 20%;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s ease;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.carousel-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-info {
  padding: 10px;
  background: #fff;
  flex: 1;
  box-sizing: border-box;
}

.card-info h3 {
  margin: 5px 0;
  font-size: 16px;
}

.card-info .desc {
  font-size: 13px;
  color: #666;
  margin: 5px 0;
}

.card-info .price {
  font-size: 16px;
  color: #e91e63;
  font-weight: bold;
}

/* 卡片状态样式 */
.active {
  transform: scale(1.1);
  opacity: 1;
  z-index: 3;
}

.prev {
  transform: translateX(-110%) scale(0.8);
  opacity: 0.6;
  z-index: 2;
}

.next {
  transform: translateX(110%) scale(0.8);
  opacity: 0.6;
  z-index: 2;
}

.hidden {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* 导航按钮样式 */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}

.nav-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.nav-btn.left {
  left: 10px;
}

.nav-btn.right {
  right: 10px;
}
</style>
